<template>
  <div class="case">
    <banner title="开设楼盘" />
    <div class="case-section" v-loading="loading">
      <div class="case-section-content">
        <div
          class="case-section-content-list"
          v-for="(cas, index) in caseList"
          :key="index"
        >
          <img :src="getFirstImageUrl(cas.content)" alt />
          <div
            class="content-list-abstract"
            :class="{ 'abstract-active': index % 2 !== 1 }"
          >
            <p class="abstract-title">{{ cas.title }}</p>
            <div
              class="abstract-content"
              v-html="truncateContent(stripImages(cas.content))"
            ></div>
            <div class="more">
              <NuxtLink class="text-decoration" :to="`/CaseDetails/${cas.id}`">
                <span>MORE </span>
                <i class="el-icon-caret-right"></i>
              </NuxtLink>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount, onMounted } from "vue";
import Banner from "../components/Banner";

const loading = ref(true);
const caseList = ref([]);
const truncateLength = ref(100);

const stripImages = (html) => {
  return html.replace(/<img[^>]*>/g, "");
};

const truncateContent = (content) => {
  if (content.length > truncateLength.value) {
    return content.slice(0, truncateLength.value) + "...";
  }
  return content;
};

const setTruncateLength = () => {
  if (window.innerWidth > 750) {
    truncateLength.value = 500;
  } else {
    truncateLength.value = 100;
  }
};

try {
  const { data: caseData } = await baseFetch("case/all");
  caseList.value = caseData.value.sort((a, b) => {
    return new Date(b.createTime) - new Date(a.createTime);
  });
  loading.value = false;
} catch (error) {
  console.error("数据加载失败:", error);
}
onMounted(() => {
  setTruncateLength();
  window.addEventListener("resize", setTruncateLength);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", setTruncateLength);
});
</script>

<style lang="scss" scoped>
@keyframes flipVerticalEnterAnimation {
  0% {
    transform: perspective(800px) rotateX(100deg);
    transition-timing-function: cubic-bezier(0.1, 0.1, 0.4, 1);
  }

  50% {
    transform: perspective(800px) rotateX(-30deg);
    transition-timing-function: cubic-bezier(0.1, 0.1, 0.4, 1);
  }

  100% {
    transform: perspective(800px) rotateX(0deg);
    transition-timing-function: cubic-bezier(0.1, 0.1, 0.4, 1);
  }
}

@keyframes imgZoom {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(
      1.04
    ); 
  }

  100% {
    transform: scale(1);
  }
}

.case {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  &-section {
    width: 100%;

    &-content {
      min-height: 1000px;
      background-color: #fff;

      &-list {
        width: 100%;
        padding: 8vw 0;
        display: flex;
        justify-content: center;
        align-items: start;
        animation: flipVerticalEnterAnimation 1s cubic-bezier(0.1, 0.1, 0.4, 1); 
        animation-fill-mode: forwards;

        img {
          align-self: center;
          margin-top: 20px;
          width: 45vw;
          transition: transform 0.3s ease-in-out; 

          &:hover {
            animation: imgZoom 0.6s ease-in-out;
          }
        }

        .content-list-abstract {
          width: 35vw;
          display: flex;
          padding-left: 5%;
          flex-direction: column;

          .abstract-title {
            font-size: 20px;
            color: #001529;
            font-weight: bold;
          }

          .abstract-content {
            color: #484848;
            font-size: 15px;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            white-space: normal !important;
            word-wrap: break-word;
            //border: 1px solid pink;
          }

          .more {
            display: flex;
            justify-content: flex-end;

            .text-decoration {
              font-weight: bold;
              text-decoration: none;

              color: grey;
            }
          }

          .more:hover {
            .text-decoration {
              color: red;
            }
          }
        }

        .abstract-active {
          order: -1;
          padding-right: 5%;
          padding-left: 0%;
        }
      }

      @media screen and (max-width: 750px) {
        &-list {
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 20px 0;

          .content-list-abstract {
            width: 88%;
            padding-left: 0%;
          }

          img {
            width: 88%;
          }

          .abstract-active {
            order: 1;
            padding-right: 0%;
            padding-left: 0%;
          }
        }
      }
    }
  }
}
</style>
